<template>
	<view class="myContacts">
		<view class="topInfo">
			<cus-search @searchChange="queryCardByCondition" placeholder="请输入要查询的人脉" padding="0 32rpx"></cus-search>
		</view>
		<scroll-view class="list" scroll-y :style="{height:scrollHeight}">
			<view class="item flex_start_center" v-for="(item,index) in list" :key="index" @tap="toDetail(item)">
				<u-image width="80" height="80" :src="item.head" :lazy-load="true" radius="4"></u-image>
				<view class="itemInfo flex_column_between_start">
					<view class="itemInfoTop flex_start_center">
						<text class="name">{{item.name}}</text>
						<text class="label">{{item.position}}</text>
					</view>
					<view class="nowrap-ellipsis" style="width: 100%;">
						{{item.company|| '暂无'}}
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="empty" v-if="!list.length && firstLoad">
			<u-empty text="未查询到人脉数据" mode="data" iconSize="100" textSize="32rpx" marginTop="20rpx"></u-empty>
		</view>
	</view>
</template>

<script>
	import cusSearch from '@/components/cus-search/cus-search.vue'
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				firstLoad: false,
				openId: '',
				list: [],
				scrollY: '400',
				windowHeight: '750'
			}
		},
		computed: {
			scrollHeight() {
				return this.windowHeight - this.scrollY + 'px'
			}
		},
		components: {
			cusSearch
		},
		onLoad() {
			let data = uni.getStorageSync('openId')
			this.openId = data.openid
			this.queryCardByCondition()
		},
		onReady() {
			this.getElementInfo()
		},
		methods: {
			getElementInfo() {
				this.windowHeight = uni.getSystemInfoSync().windowHeight
				this.$getElementInfo('.list').then(res => {
					this.scrollY = res.top
				})
			},
			toDetail(item) {
				this.$toPage('/pagesCard/contacts/friendsContacts?info=' + JSON.stringify(item))
			},
			async queryCardByCondition(keyword = null) {
				let res = await this.$api.queryCardByCondition({
					openId: this.openId,
					name: keyword,
				})
				if (res.success) {
					this.list = res.result
				} else {
					this.$showToast('查询失败')
					this.list = []
				}
				this.firstLoad = true
			},
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background-color: #F7F8FA;
	}

	.myContacts {

		.topInfo {
			padding: 20rpx 0;
			background-color: #fff;
		}

		.list {
			box-sizing: border-box;
			padding-bottom: calc(10rpx + env(safe-area-inset-bottom));

			.item {
				background-color: #fff;
				line-height: 1;
				height: 140rpx;
				padding: 0 32rpx;
				font-size: 28rpx;
				color: #86909C;

				.itemInfo {
					height: 80rpx;
					padding-left: 20rpx;
					flex: 1;
					min-width: 200px;

					.itemInfoTop {
						.name {
							font-size: 32rpx;
							color: #1D2129;
							font-weight: 600;
						}

						.label {
							font-size: 24rpx;
							padding: 4rpx 8rpx;
							background: #E9F0FD;
							color: #276AEE;
							border-radius: 4rpx;
							margin-left: 16rpx;
						}
					}
				}

			}
		}

		.empty {
			padding: 80rpx 0;

		}
	}
</style>